import React, {memo, useEffect, useState} from 'react';

import "./index.css";
import * as echarts from 'echarts';
import {saveExportObj, saveExportObjCn} from "../../pages/main/export/store/actionCreators";
import {useDispatch, useSelector} from "react-redux";
import {deepClone, getTargetIndex, slopToAngle} from "../../common/utils";
import {useDebounce} from "../../common/myHooks";
import pic_ntc from "../../pages/main/analysis/components/allelicDiscrimination/images/ntc.png";
import {WELL_TYPE} from "../../pages/main/store/constants";
import pic_undeterimined from "../../pages/main/analysis/components/allelicDiscrimination/images/undeterimined.png";
import pic_allele1 from "../../pages/main/analysis/components/allelicDiscrimination/images/allele1.png";
import pic_control1 from "../../pages/main/analysis/components/allelicDiscrimination/images/control1.png";
import pic_heterozygote from "../../pages/main/analysis/components/allelicDiscrimination/images/heterozygote.png";
import pic_allele1allele2 from "../../pages/main/analysis/components/allelicDiscrimination/images/allele1allele2.png";
import pic_allele2 from "../../pages/main/analysis/components/allelicDiscrimination/images/allele2.png";
import pic_control2 from "../../pages/main/analysis/components/allelicDiscrimination/images/control2.png";
import {WELLS_COLUMN, WELLS_ROW} from "../../pages/main/plate/config";
import {DATA_ANALYSIS_METHOD} from "../../pages/main/analysis/components/quantification/config";
import {saveAllelicTableData, saveAllelicTableWell, saveDegree} from "../../pages/main/analysis/components/allelicDiscrimination/store/actionCreators";


let myChart;
let myChart2;
let unit, unitY, scaleY, originZero, distance;
export default memo(function AllelicChart(props) {
  const {option, option2, isCq, angles, centerInfo, seriesData, wellId, setWellId} = props;
  const dispatch = useDispatch();
  const {data, exportObj, exportObjCn, isCN, allelicSetting, degree} = useSelector(state => ({
    data: state.dataReducer.data,
    exportObj: state.exportReducer.exportObj,
    exportObjCn: state.exportReducer.exportObjCn,
    isCN: state.languageReducer.isCN,
    allelicSetting: state.allelicReducer.allelicSetting,
    degree: state.allelicReducer.degree
  }));
  const [dragDegree, setDragDegree] = useState({});
  let clonePoints = {};
  useEffect(() => {
    if (Object.keys(centerInfo).length < 1) {
      centerInfo.degree = degree;
    }
  }, []);

  useEffect(() => {
    myChart = echarts.init(document.getElementById('main'));
    myChart.clear();
    myChart.setOption(option);
    let exportObjReport = isCN ? exportObjCn : exportObj;
    exportObjReport.analysis.imgAllelic_cq = myChart.getDataURL(
      {
        type: 'png'
      }
    ).split(",")[1];
    isCN
      ? dispatch(saveExportObjCn(exportObjReport))
      : dispatch(saveExportObj(exportObjReport));
  }, [option, exportObj, exportObjCn]);

  useEffect(() => {
    myChart2 = echarts.init(document.getElementById('main2'));
    !isCq && myChart.clear();
    myChart2.clear();
    let firstData = seriesData.map(item => item[0]);  //  x轴数据
    let secondData = seriesData.map(item => item[1]); //  y轴数据
    let yMax = Math.max(...secondData);
    let xMax = Math.max(...firstData);
    if (!isCq && !allelicSetting.assignCallAuto && Object.keys(option2).length > 0 && option2.series.length > 0) {
      //手动 TODO:RFU绘制角度线事件
      setTimeout(function () {
        originZero = myChart2.convertToPixel({gridId: 'gd'}, [0, 0]);
        let test1 = myChart2.convertToPixel({gridId: 'gd'}, [10, 10]);
        unit = (test1[0] - originZero[0]) / 10;//每单位x距离对应像素
        unitY = (originZero[1] - test1[1]) / 10;//每单位y距离对应像素
        scaleY = (unitY * centerInfo.x1y1) / (unit * centerInfo.x2y2);
        distance = centerInfo.radius * unit;
        // window.seriesData = seriesData;
        const opacity = 0.04;
        //椭圆
        let dragElliptic = [
          {//绘制圆心的椭圆
            id: 'circle1',
            $action: 'replace',
            type: 'sector',
            position: myChart2.convertToPixel('grid', [0, 0]),
            scaleY,
            shape: {
              cx: 0,
              cy: 0,
              r: centerInfo.radius * unit,
              startAngle: (-90 * Math.PI) / 180,
              endAngle: 0
            },
            style: {
              fill: 'grey',
              opacity: 0.3
            },
            invisible: false,
            z: 100,
            silent: true
          },
          {//拖动圆（负责拖动圆心的椭圆）
            id: 'circle2',
            type: 'circle',
            position: myChart2.convertToPixel('grid', [0, 0]),
            shape: {
              cx: 0,
              cy: 0,
              r: xMax * unit * 2 / 7
            },
            style: {
              fill: 'grey',
              shadowColor: '#f5f1f1',
              opacity: 0.03
            },
            invisible: false,//默认隐去端点
            draggable: true,
            ondrag: function (dx, dy) {
              onPointDragging([this.x, this.y]);
            },
            z: 1
          }
        ];
        const radius = 25;
        //分割公差带 A1-H
        let startAngleA1H = centerInfo.degree[0] + (centerInfo.degree[1] - centerInfo.degree[0]) * 2 / 5;
        let endAngleA1H = centerInfo.degree[1] - (centerInfo.degree[1] - centerInfo.degree[0]) * 2 / 5;
        //分割公差带 A2-H
        let startAngleA2H = centerInfo.degree[2] + (centerInfo.degree[3] - centerInfo.degree[2]) * 2 / 5;//较大
        let endAngleA2H = centerInfo.degree[3] - (centerInfo.degree[3] - centerInfo.degree[2]) * 2 / 5;//较低

        let lineA1HOfStart = [[Math.floor(xMax) / 2, Math.tan(startAngleA1H * Math.PI / 180) * Math.floor(xMax) / 2]]; //开始角度的两个点
        let lineA1HOfEnd = [[Math.floor(xMax) / 2, Math.tan(endAngleA1H * Math.PI / 180) * Math.floor(xMax) / 2]]; //结束角度的两个点
        let lineA2HOfStart = [[Math.floor(xMax) / 4, Math.tan(startAngleA2H * Math.PI / 180) * Math.floor(xMax) / 4]]; //开始角度的两个点
        let lineA2HOfEnd = [[Math.floor(xMax) / 4, Math.tan(endAngleA2H * Math.PI / 180) * Math.floor(xMax) / 4]]; //结束角度的两个点
        let pixelOfl10 = myChart2.convertToPixel('grid', lineA1HOfStart[0]);
        let pixelOfl11 = myChart2.convertToPixel('grid', lineA1HOfEnd[0]);
        let pixelOfl20 = myChart2.convertToPixel('grid', lineA2HOfStart[0]);
        let pixelOfl21 = myChart2.convertToPixel('grid', lineA2HOfEnd[0]);
        // console.log('originZero', originZero);
        // console.log('pixelOfl10', pixelOfl10);
        let k_l10 = slopToAngle(Math.abs(pixelOfl10[1] - originZero[1]), Math.abs(pixelOfl10[0] - originZero[0])); //像素有偏差，以像素为准重新赋值起始角度
        let k_l11 = slopToAngle(Math.abs(pixelOfl11[1] - originZero[1]), Math.abs(pixelOfl11[0] - originZero[0]));
        let line0 = lineA1HOfStart.map(function (item, index) {
          return {
            type: 'circle',
            id: 'p1',
            position: myChart2.convertToPixel('grid', item),
            shape: {
              cx: 0,
              cy: 0,
              r: radius //控制拖动的区域
            },
            style: {
              fill: 'grey',
              shadowColor: '#f5f1f1',
              opacity: opacity
            },
            invisible: false,//默认隐去端点
            draggable: true,
            ondrag: function (dx) {
              handlePointDragging([dx.target.x, dx.target.y], 'A1H0', 'circle3', index, 'p1');
            },
            ondragstart: function () {
              handleOndragStart('circle3');
            },
            ondragend: function () {
              handleOndragEnd('circle3');
            },
            z: 350
          };
        });
        let line1 = lineA1HOfEnd.map(function (item, index) {
          return {
            type: 'circle',
            id: 'p2',
            position: myChart2.convertToPixel('grid', item),
            shape: {
              cx: 0,
              cy: 0,
              r: radius //控制拖动的区域
            },
            style: {
              fill: 'grey',
              shadowColor: '#f5f1f1',
              opacity: opacity
            },
            invisible: false,//默认隐去端点
            draggable: true,
            ondrag: function () {
              handlePointDragging([this.x, this.y], 'A1H1', 'circle3', index, 'p2');
            },
            ondragstart: function () {
              handleOndragStart('circle3');
            },
            ondragend: function () {
              handleOndragEnd('circle3');
            },
            z: 350
          };
        });
        // console.log(unit, unitY, scaleY);

        let line2 = lineA2HOfStart.map(function (item, index) {
          return {
            type: 'circle',
            id: 'p3',
            position: myChart2.convertToPixel('grid', item),
            shape: {
              cx: 0,
              cy: 0,
              r: radius //控制拖动的区域
            },
            style: {
              fill: 'grey',
              shadowColor: '#f5f1f1',
              opacity: opacity
            },
            invisible: false,//默认隐去端点
            draggable: true,
            ondrag: function (dx, dy) {
              handlePointDragging([dx.target.x, dx.target.y], 'A2H0', 'circle4', index, 'p3');
            },
            ondragstart: function () {
              handleOndragStart('circle4');
            },
            ondragend: function () {
              handleOndragEnd('circle4');
            },
            z: 350
          };
        });
        let line3 = lineA2HOfEnd.map(function (item, index) {
          return {
            type: 'circle',
            id: 'p4',
            position: myChart2.convertToPixel('grid', item),
            shape: {
              cx: 0,
              cy: 0,
              r: radius//控制拖动的区域
            },
            style: {
              fill: 'grey',
              shadowColor: '#f5f1f1',
              opacity: opacity
            },
            invisible: false,//默认隐去端点
            draggable: true,
            ondrag: function (dx) {
              handlePointDragging([dx.target.x, dx.target.y], 'A2H1', 'circle4', index, 'p4');
            },
            ondragstart: function () {
              handleOndragStart('circle4');
            },
            ondragend: function () {
              handleOndragEnd('circle4');
            },
            z: 350
          };
        });
        let k_l20 = slopToAngle(Math.abs(pixelOfl20[1] - originZero[1]), Math.abs(pixelOfl20[0] - originZero[0])); //像素有偏差，以像素为准重新赋值起始角度
        let k_l21 = slopToAngle(Math.abs(pixelOfl21[1] - originZero[1]), Math.abs(pixelOfl21[0] - originZero[0]));
        //公差带
        let bands = [
          {//绘制A1 && H 交叉扇形
            id: 'circle3',
            type: 'sector',
            position: myChart2.convertToPixel('grid', [0, 0]),
            shape: {
              cx: 0,
              cy: 0,
              r: Math.max(yMax * unitY, xMax * unit) * 3,
              startAngle: -k_l11 * Math.PI / 180,//结束 逆时针看
              endAngle: -k_l10 * Math.PI / 180  //开始
            },
            style: {
              fill: 'grey',
              opacity: 0.3
            },
            invisible: false,
            z: 101,
            silent: true
          }, {//绘制A2 && H 交叉扇形
            id: 'circle4',
            type: 'sector',
            position: myChart2.convertToPixel('grid', [0, 0]),
            shape: {
              cx: 0,
              cy: 0,
              r: Math.max(yMax * unitY, xMax * unit) * 3,
              startAngle: -k_l21 * Math.PI / 180,//结束 逆时针看
              endAngle: -k_l20 * Math.PI / 180  //开始
            },
            style: {
              fill: 'grey',
              opacity: 0.3
            },
            invisible: false,
            z: 101,
            silent: true
          }
        ];
        try {
          updateCircleTable(centerInfo.radius * unit);
          myChart2.setOption({
            graphic: [
              ...dragElliptic,
              ...bands,
              ...line0,
              ...line1,
              ...line2,
              ...line3
            ]
          });
        } catch (e) {
          console.log(e);
        }
      }, 0);
    } else if (!isCq && allelicSetting.assignCallAuto && Object.keys(option2).length > 0 && option2.series.length > 0) {
      //Auto
      setTimeout(function () {
        originZero = myChart2.convertToPixel({gridId: 'gd'}, [0, 0]);
        let test1 = myChart2.convertToPixel({gridId: 'gd'}, [10, 10]);
        unit = (test1[0] - originZero[0]) / 10;//每单位x距离对应像素
        unitY = (originZero[1] - test1[1]) / 10;//每单位y距离对应像素
        scaleY = (unitY * centerInfo.x1y1) / (unit * centerInfo.x2y2);
        let circles = [{//绘制圆
          id: 'circle1',
          $action: 'replace',
          type: 'sector',
          position: myChart2.convertToPixel('grid', [0, 0]),
          scaleY,
          shape: {
            cx: 0,
            cy: 0,
            r: centerInfo.radius * unit,
            startAngle: (-90 * Math.PI) / 180,
            endAngle: 0
          },
          style: {
            fill: 'grey',
            opacity: 0.3
          },
          invisible: true,
          z: 100,
          silent: true
        }];
        try {
          updateCircleTable(centerInfo.radius * unit);
          myChart2.setOption({
            graphic: [
              ...circles
            ]
          });
        } catch (e) {
          console.log(e);
        }
      }, 0);
    }
    let exportObjReport = isCN ? exportObjCn : exportObj;
    exportObjReport.analysis.imgAllelic_rfu = myChart.getDataURL({type: 'png'}).split(",")[1];
    isCN ? dispatch(saveExportObjCn(exportObjReport)) : dispatch(saveExportObj(exportObjReport));
    myChart2.setOption(option2);
    myChart2.on('click', function (params) {
      if (params.componentType === 'series' && params.seriesType === 'scatter') {
        let dataIndex = params.dataIndex;  // 获取被点击的散点的索引
        setWellId(dataIndex);
        // let xValue = window.seriesData[dataIndex][0];
        // let yValue = window.seriesData[dataIndex][1];
        // console.log(slopToAngle(yValue, xValue));
        let selectWellSampleId = document.getElementById(dataIndex);
        selectWellSampleId?.scrollIntoView({
          behavior: 'smooth', //顺滑的滚动
          block: 'center', //容器上下的中间
          inline: 'center' //容器左右
        });
      }
    });
  }, [option2, exportObj, exportObjCn, allelicSetting.assignCallAuto, allelicSetting.cycle]);

  useEffect(() => {
    myChart2 = echarts.init(document.getElementById('main2'));
    let selectWellSampleId = document.getElementById(wellId);
    selectWellSampleId?.scrollIntoView({
      behavior: 'smooth', //顺滑的滚动
      block: 'center', //容器上下的中间
      inline: 'center' //容器左右
    });
    myChart2.setOption({
      series: [
        {
          id: 'allWells',
          symbolSize: (value, params) => {
            if (wellId === params.dataIndex) {
              return 24;
            } else {
              return 12;
            }
          }
        }
      ]
    });
  }, [wellId]);

  function isInSides(angle) {
    let cloneDegree = deepClone(centerInfo.degree);
    return (angle > cloneDegree[0] && angle < cloneDegree[1]) || (angle > cloneDegree[2] && angle < cloneDegree[3]);
  }

  //变动Circle更新table和cell数据
  const updateCircleTable = useDebounce(distance => {
    let tableData = [];
    let cloneAllelicTableWell = new Array(96).fill(null);
    let xChannelIndex = 0,
      yChannelIndex = 0;
    data.targets.forEach(item => {
      item.channel === allelicSetting.xAxis && (xChannelIndex = item.channelIndex);
      item.channel === allelicSetting.yAxis && (yChannelIndex = item.channelIndex);
    });
    data.wells.forEach((item, index) => {
      let dataItem = {
        well: WELLS_ROW[item.row] + WELLS_COLUMN[item.col],
        omit: true,
        sampleName: item.sampleName,
        task: item.type,
        allele1Cq: item.lines[xChannelIndex].cq < 0 ? "NA" : item.lines[xChannelIndex].cq,
        allele2Cq: item.lines[yChannelIndex].cq < 0 ? "NA" : item.lines[yChannelIndex].cq,
        allele1RFU: item.lines[xChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][allelicSetting.cycle - 1],
        allele2RFU: item.lines[yChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][allelicSetting.cycle - 1],
        call: "",
        comments: ""
      };
      let xCq, yCq;
      xCq = item.lines[xChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][allelicSetting.cycle - 1];
      yCq = item.lines[yChannelIndex][DATA_ANALYSIS_METHOD['Raw Data']][allelicSetting.cycle - 1];
      let a = distance;//长半轴
      let b = distance * scaleY; //短半轴
      let max_SectorY = b * Math.sqrt(1 - (xCq * unit) * (xCq * unit) / (a * a));//椭圆公式
      //区分四组中Task不同的情况:针对pos进行对well和call更新
      if (xCq * unit <= distance && yCq * unitY <= max_SectorY) {
        if (data.wells[index].type !== '') {
          cloneAllelicTableWell[index] = "ntc";
          dataItem.call = "NTC";
        }
      } else {
        let angle = slopToAngle(yCq, xCq);
        if (data.wells[index].type !== '') {
          if (isInSides(angle) && !isCq && !allelicSetting.assignCallAuto) { //手动下
            cloneAllelicTableWell[index] = "undeterimined";
            dataItem.call = "Undeterimined";
          } else if (data.wells[index].type === WELL_TYPE.NTC) {
            cloneAllelicTableWell[index] = "ntc";
            dataItem.call = "NTC";
          } else {
            //区分四组中Task不同的情况:针对pos进行对well和call更新
            if (angle <= centerInfo.degree[2] + 2.5 && angle >= centerInfo.degree[1] - 2.5) {
              if (data.wells[index].type === WELL_TYPE.UNK) {
                cloneAllelicTableWell[index] = "heterozygote";
                dataItem.call = "Heterozygote";
              } else if (data.wells[index].type === WELL_TYPE.POS) {
                cloneAllelicTableWell[index] = "allele1allele2";
                dataItem.call = "Control Heterozygote";
              }
            } else if (angle > centerInfo.degree[2]) {
              if (data.wells[index].type === WELL_TYPE.UNK) {
                cloneAllelicTableWell[index] = "allele2";
                dataItem.call = "Allele 2";
              } else if (data.wells[index].type === WELL_TYPE.POS) {
                cloneAllelicTableWell[index] = "control2";
                dataItem.call = "Control 2";
              }
            } else if (angle <= centerInfo.degree[0]) {
              if (data.wells[index].type === WELL_TYPE.UNK) {
                cloneAllelicTableWell[index] = "allele1";
                dataItem.call = "Allele 1";
              } else if (data.wells[index].type === WELL_TYPE.POS) {
                cloneAllelicTableWell[index] = "control1";
                dataItem.call = "Control 1";
              }
            }
          }
        }
      }
      tableData.push(dataItem);
    });
    dispatch(saveAllelicTableWell(cloneAllelicTableWell));
    dispatch(saveAllelicTableData(tableData));
  }, 200);

  //拖动事件
  function handlePointDragging(pos, type, id, index, selfId) {
    try {
      let position = myChart2.convertFromPixel('grid', pos);
      let arr = ['A1H0', 'A1H1', 'A2H0', 'A2H1'];
      let index = arr.findIndex(it => it === type);
      let k = slopToAngle(position[1], position[0]);
      let k_bottom_up = slopToAngle(Math.abs(pos[1] - originZero[1]), Math.abs(pos[0] - originZero[0]));
      switch (type) {
        case 'A1H0': //下界
        case 'A2H0':
          if (k <= centerInfo.degree[index + 1] - 3) {
            clonePoints[type + index] = pos;
            centerInfo.degree[index] = k;
            setDragDegree({...centerInfo.degree});
            dispatch(saveDegree({...centerInfo.degree}));
            myChart2.setOption({
              graphic: [
                {//绘制A && H 交叉扇形
                  id,
                  shape: {
                    endAngle: -k_bottom_up * Math.PI / 180  //开始
                  }
                }
              ],
              series: [
                {
                  id: 'allWells',
                  symbol: (value, params) => {
                    let xCq = value[0], yCq = value[1], index = params.dataIndex;
                    let angle = slopToAngle(yCq, xCq);
                    let a = distance;//长半轴
                    let b = distance * scaleY; //短半轴
                    let max_SectorY = b * Math.sqrt(1 - (xCq * unit) * (xCq * unit) / (a * a));//椭圆公式
                    if (xCq * unit <= a && yCq * unitY <= max_SectorY) { //判断是否在椭圆内部
                      if (data.wells[index].type !== '') {
                        return "image://" + pic_ntc;
                      } else {
                        return "none";
                      }
                    } else {
                      if (isInSides(angle) && data.wells[index].type !== '') {
                        return "image://" + pic_undeterimined;
                      } else if (data.wells[index].type === WELL_TYPE.NTC) {
                        return "image://" + pic_ntc;
                      } else {
                        if (angle <= centerInfo.degree[2] + 2.5 && angle >= centerInfo.degree[1] - 2.5) {
                          if (data.wells[index].type === WELL_TYPE.UNK) {
                            return "image://" + pic_heterozygote;
                          } else if (data.wells[index].type === WELL_TYPE.POS) {
                            return "image://" + pic_allele1allele2;
                          } else {
                            return "none";
                          }
                        } else if (angle > centerInfo.degree[2]) {
                          if (data.wells[index].type === WELL_TYPE.UNK) {
                            return "image://" + pic_allele2;
                          } else if (data.wells[index].type === WELL_TYPE.POS) {
                            return "image://" + pic_control2;
                          } else {
                            return "none";
                          }
                        } else {
                          if (data.wells[index].type === WELL_TYPE.UNK) {
                            return "image://" + pic_allele1;
                          } else if (data.wells[index].type === WELL_TYPE.POS) {
                            return "image://" + pic_control1;
                          } else {
                            return "none";
                          }
                        }
                      }
                    }
                  },
                  symbolSize: 12,
                  data: seriesData,
                  type: 'scatter'
                }
              ]
            });
          } else {
            clonePoints[type + index] && myChart2.setOption({
              graphic: [
                {
                  id: selfId, //外显的圆
                  position: clonePoints[type + index]
                }
              ]
            });
          }
          break;
        case 'A1H1'://上界
        case 'A2H1':
          if (k >= centerInfo.degree[index - 1] + 3) {
            clonePoints[type + index] = pos;
            centerInfo.degree[index] = k;
            setDragDegree({...centerInfo.degree});
            dispatch(saveDegree({...centerInfo.degree}));
            myChart2.setOption({
              graphic: [
                {//绘制A && H 交叉扇形
                  id,
                  shape: {
                    startAngle: -k_bottom_up * Math.PI / 180//结束 逆时针看
                  }
                }
              ],
              series: [
                {
                  id: 'allWells',
                  symbol: (value, params) => {
                    let xCq = value[0], yCq = value[1], index = params.dataIndex;
                    let angle = slopToAngle(yCq, xCq);
                    let angleIndex = getTargetIndex(angles, angle, centerInfo.resultKM);
                    let a = distance;//长半轴
                    let b = distance * scaleY; //短半轴
                    let max_SectorY = b * Math.sqrt(1 - (xCq * unit) * (xCq * unit) / (a * a));//椭圆公式
                    if (xCq * unit <= distance && yCq * unitY <= max_SectorY) { //判断是否在椭圆内部
                      if (data.wells[index].type !== '') {
                        return "image://" + pic_ntc;
                      } else {
                        return "none";
                      }
                    } else {
                      if (isInSides(angle) && data.wells[index].type !== '') {
                        return "image://" + pic_undeterimined;
                      } else if (data.wells[index].type === WELL_TYPE.NTC) {
                        return "image://" + pic_ntc;
                      } else {
                        if (angle <= centerInfo.degree[2] + 2.5 && angle >= centerInfo.degree[1] - 2.5) {
                          if (data.wells[index].type === WELL_TYPE.UNK) {
                            return "image://" + pic_heterozygote;
                          } else if (data.wells[index].type === WELL_TYPE.POS) {
                            return "image://" + pic_allele1allele2;
                          } else {
                            return "none";
                          }
                        } else if (angle > centerInfo.degree[2]) {
                          if (data.wells[index].type === WELL_TYPE.UNK) {
                            return "image://" + pic_allele2;
                          } else if (data.wells[index].type === WELL_TYPE.POS) {
                            return "image://" + pic_control2;
                          } else {
                            return "none";
                          }
                        } else {
                          if (data.wells[index].type === WELL_TYPE.UNK) {
                            return "image://" + pic_allele1;
                          } else if (data.wells[index].type === WELL_TYPE.POS) {
                            return "image://" + pic_control1;
                          } else {
                            return "none";
                          }
                        }
                      }
                    }
                  },
                  symbolSize: 12,
                  data: seriesData,
                  type: 'scatter'
                }
              ]
            });
          } else {
            clonePoints[type + index] && myChart2.setOption({
              graphic: [
                {
                  id: selfId, //外显的圆
                  position: clonePoints[type + index]
                }
              ]
            });
          }
          break;
      }
      updateCircleTable(distance);
    } catch (e) {
      console.log(e);
    }
  }

  //处理开始拖动开始高亮状态
  function handleOndragStart(id) {
    myChart2.setOption({
      graphic: [
        {//绘制A && H 交叉扇形
          id,
          style: {
            fill: '#5bc8cb',
            opacity: 0.3
          }
        }
      ]
    });
  }

  function handleOndragEnd(id) {
    setTimeout(() => {
      myChart2.setOption({
        graphic: [
          {//绘制A && H 交叉扇形
            id,
            style: {
              fill: 'grey',
              opacity: 0.3
            }
          }
        ]
      });
    });
  }

  //处理结束消除拖动开亮状态
  function onPointDragging(pos) {
    try {
      setTimeout(() => {
        //拖动圆，改变圆的半径
        let b = myChart2.convertToPixel('grid', [0, 0]);
        let dis = pos[0] - b[0];
        //更新NTC
        distance = (dis < centerInfo.radius * unit / 2) ? centerInfo.radius * unit / 2 : dis;
        updateCircleTable(distance);
        myChart2.setOption({
          graphic: [
            {
              id: 'circle1', //外显的圆
              shape: {
                r: distance
              }
            },
            {
              id: 'circle2',  //控制拖动的圆
              position: (dis < 0) ? b : pos,//防止拖动圆偏离太远
              shape: {
                r: (dis < centerInfo.radius * unit) ? centerInfo.radius * unit / 2 : dis / 2 //保证能时刻拖动
              }
            }
          ],
          series: [
            {
              id: 'allWells',
              symbol: (value, params) => {
                let xCq = value[0], yCq = value[1], index = params.dataIndex;
                let angle = slopToAngle(yCq, xCq);
                let angleIndex = getTargetIndex(angles, angle, centerInfo.resultKM);
                //TODO:earhart绘制的sector，已知其对应的graphic的scaleY，sacleX为1，通过任意一点的x坐标，求其在y方向圆弧的边缘最大值,用椭圆思路解决
                let a = distance;//长半轴
                let b = distance * scaleY; //短半轴
                let max_SectorY = b * Math.sqrt(1 - (xCq * unit) * (xCq * unit) / (a * a));//椭圆公式
                if (xCq * unit <= a && yCq * unitY <= max_SectorY) { //判断是否在椭圆内部
                  if (data.wells[index].type !== '') {
                    return "image://" + pic_ntc;
                  } else {
                    return "none";
                  }
                } else {
                  if (isInSides(angle) && data.wells[index].type !== '') {
                    return "image://" + pic_undeterimined;
                  } else if (data.wells[index].type === WELL_TYPE.NTC) {
                    return "image://" + pic_ntc;
                  } else {
                    if (angle <= centerInfo.degree[2] + 2.5 && angle >= centerInfo.degree[1] - 2.5) {
                      if (data.wells[index].type === WELL_TYPE.UNK) {
                        return "image://" + pic_heterozygote;
                      } else if (data.wells[index].type === WELL_TYPE.POS) {
                        return "image://" + pic_allele1allele2;
                      } else {
                        return "none";
                      }
                    } else if (angle > centerInfo.degree[2]) {
                      if (data.wells[index].type === WELL_TYPE.UNK) {
                        return "image://" + pic_allele2;
                      } else if (data.wells[index].type === WELL_TYPE.POS) {
                        return "image://" + pic_control2;
                      } else {
                        return "none";
                      }
                    } else if (angle < centerInfo.degree[0]) {
                      if (data.wells[index].type === WELL_TYPE.UNK) {
                        return "image://" + pic_allele1;
                      } else if (data.wells[index].type === WELL_TYPE.POS) {
                        return "image://" + pic_control1;
                      } else {
                        return "none";
                      }
                    } else {
                      return "none";
                    }
                  }
                }
              },
              symbolSize: 12,
              data: seriesData,
              type: 'scatter'
            }
          ]
        });
      });
    } catch (e) {
      console.log(e);
    }
  }

  return (
    <div style={{position: "relative"}} className="allelicChart">
      <div id="main" style={{width: 855, height: 465, top: 42}}/>
      <div id="main2" style={{width: 855, height: 465, top: 42}}/>
    </div>
  );
});
